import { Card, Form, Button, Radio, DatePicker, Select, Popconfirm } from 'antd'
// datePick中文包
import locale from 'antd/es/date-picker/locale/zh_CN'
// 表格相关导入
import { Table, Tag, Space } from 'antd'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
import img404 from '@/assets/error.png'
// 导入自定义Hooks函数
import useChannel from '@/hooks/useChannel'
import { useEffect, useState } from 'react'
import { getArticleList, delArticle } from '@/apis/article'
// 导入样式
import './index.scss'
import { useNavigate } from 'react-router-dom'


const { Option } = Select
const { RangePicker } = DatePicker

const Article = () => {
    const navigate = useNavigate()

    // 获取频道数据
    const { channels } = useChannel()

    // 定义状态枚举
    const state = {
        1: <Tag color="warning">待审核</Tag>,
        2: <Tag color="success">审核通过</Tag>
    }

    // 准备列数据
    const columns = [
        {
            title: '封面',
            dataIndex: 'cover',
            width: 120,
            render: cover => {
                return <img src={cover.images[0] || img404} width={80} height={60} alt="" />
            }
        },
        {
            title: '标题',
            dataIndex: 'title',
            width: 220
        },
        {
            title: '状态',
            dataIndex: 'status',
            // data === 1 待审核
            // data === 2 审核通过
            render: data => state[data]
        },
        {
            title: '发布时间',
            dataIndex: 'pubdate'
        },
        {
            title: '阅读数',
            dataIndex: 'read_count'
        },
        {
            title: '评论数',
            dataIndex: 'comment_count'
        },
        {
            title: '点赞数',
            dataIndex: 'like_count'
        },
        {
            title: '操作',
            render: data => {
                return (
                    <Space size="middle">
                        <Button type="primary" onClick={()=>navigate(`/publish?id=${data.id}`)} shape="circle" icon={<EditOutlined />} />
                        {/* 添加气泡提示框 */}
                        <Popconfirm
                            title="删除文章"
                            description="你确定要删除当前文章吗？"
                            onConfirm={()=>onConfirm(data)}
                            okText="确认"
                            cancelText="取消"
                        >
                            <Button
                                type="primary"
                                danger
                                shape="circle"
                                icon={<DeleteOutlined />}
                            />
                        </Popconfirm>
                    </Space>
                )
            }
        }
    ]

    // 获取表格数据
    const [list, setList] = useState([])
    const [count, setCount] = useState(0)
    const [params, setParams] = useState({
        page: 1,
        per_page: 4,
        begin_pubdate: '',
        end_pubdate: '',
        status: '',
        channel_id: ''
    })

    useEffect(() => {
        getArticleList(params).then(res => {
            setList(res.data.results)
            setCount(res.data.total_count)
        }).catch(err => {
            console.log(err)
        })
    }, [params])

    // 表单筛选
    const onFinish = (formData) => {
        console.log(formData)
        // 将收集到的数据放在参数params中
        setParams({
            ...params,
            channel_id: formData.channel_id,
            status: formData.status,
            begin_pubdate: formData.date[0].format('YYYY-MM-DD'),
            end_pubdate: formData.date[1].format('YYYY-MM-DD')
        })
    }

    // 分页的页码变化回调
    const onPageChange = (page) => {
        // 切换页码 => 修改参数依赖项，引起数据重新获取渲染
        setParams({
            ...params,
            page
        })
    }

    // 删除文章
    const onConfirm = async (data) => {
        await delArticle(data.id)
        // 更新列表
        setParams({
            ...params
        })
    }
    return (
        <div className='article'>
            {/* 表单区域 */}
            <Form initialValues={{ status: '' }} className='form' onFinish={onFinish}>
                <Form.Item label="状态" name="status">
                    <Radio.Group>
                        <Radio value={''}>全部</Radio>
                        <Radio value={0}>草稿</Radio>
                        <Radio value={2}>审核通过</Radio>
                    </Radio.Group>
                </Form.Item>

                <Form.Item label="频道" name="channel_id">
                    <Select
                        placeholder="请选择文章频道"
                        style={{ width: 120 }}
                    >
                        {channels.map(item => <Option key={item.id} value={item.id}>{item.name}</Option>)}
                    </Select>
                </Form.Item>

                <Form.Item label="日期" name="date">
                    {/* 传入locale属性 控制中文显示*/}
                    <RangePicker locale={locale}></RangePicker>
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit" style={{ marginLeft: 40 }}>
                        筛选
                    </Button>
                </Form.Item>
            </Form>
            {/* 表格区域 */}
            <Card className='table' title={`根据筛选条件共查询到 ${count} 条结果：`}>
                <Table rowKey="id" columns={columns} dataSource={list} pagination={{
                    total: count,
                    pageSize: params.per_page,
                    onChange: onPageChange
                }} />
            </Card>
        </div>
    )
}

export default Article